<td> 

<!--------------------------------Javascript------------------------------>
<script>

	reset();


function reset()
{
	document.getElementById("newItemRow").style.visibility = "hidden";
	
	document.getElementById("createItemBtn").disabled=false;
	document.getElementById("saveItemBtn").disabled=true;
	document.getElementById("editItemBtn").disabled=true;
	document.getElementById("deleteItemBtn").disabled=true;	
		
	document.getElementById("inventoryAction").value = "";
	document.getElementById("inventorySelectedId").value = "";
	
			
	document.getElementById("newItemName").value = "";
	document.getElementById("newItemDescription").value = "";
	document.getElementById("newItemQuantity").value = "";
		
}


function createItem()
{
	if(document.getElementById("inventoryAction").value=="")
	{
		document.getElementById("inventoryAction").value="create";
		document.getElementById("createItemBtn").value= "Cancel Create";
			
		document.getElementById("newItemRow").style.visibility = "visible";
		document.getElementById("createItemBtn").disabled=false;
		document.getElementById("saveItemBtn").disabled=false;
		document.getElementById("editItemBtn").disabled=true;
		document.getElementById("deleteItemBtn").disabled=true;	
	}
	else if(document.getElementById("inventoryAction").value=="create")
	{
		document.getElementById("inventoryAction").value="";
		document.getElementById("createItemBtn").value= "Create Item";
		
		reset();
	}
}
	
function saveItem()
{
}

function editItem()
{
	if(document.getElementById("inventoryAction").value=="")
	{	
		document.getElementById("inventoryAction").value="edit";
		document.getElementById("editItemBtn").value= "Cancel Edit";
		
		document.getElementById("newItemRow").style.visibility = "visible";	
		document.getElementById("createItemBtn").disabled=true;
		document.getElementById("saveItemBtn").disabled=false;
		document.getElementById("editItemBtn").disabled=false;
		document.getElementById("deleteItemBtn").disabled=true;	
		document.getElementById("plusItemBtn").disabled=true;	
		document.getElementById("minusItemBtn").disabled=true;	
		
		document.getElementById("newItemName").value = document.getElementById("name" + document.getElementById("inventorySelectedId").value).textContent;
		document.getElementById("newItemDescription").value = document.getElementById("description" + document.getElementById("inventorySelectedId").value).textContent;
		document.getElementById("newItemQuantity").value = document.getElementById("quantity" + document.getElementById("inventorySelectedId").value).textContent;
			
	}
		
	else if(document.getElementById("inventoryAction").value=="edit")
	{
		document.getElementById("editItemBtn").value= "Edit Item";
		document.getElementById(document.getElementById("inventorySelectedId").value).style.backgroundColor ="gray";			
		reset();				
	}
		
}
	
	
function plusItem()
{
	document.getElementById("inventoryAction").value="plus";
	
	document.getElementById("newItemName").value = document.getElementById("name"+document.getElementById("inventorySelectedId").value).textContent;
	document.getElementById("newItemDescription").value = document.getElementById("description"+document.getElementById("inventorySelectedId").value).textContent;
	document.getElementById("newItemQuantity").value = document.getElementById("quantity"+document.getElementById("inventorySelectedId").value).textContent;
		
	document.InventoryForm.submit();
}

function minusItem()
{
	document.getElementById("inventoryAction").value="minus";
	
	document.getElementById("newItemName").value = document.getElementById("name"+document.getElementById("inventorySelectedId").value).textContent;
	document.getElementById("newItemDescription").value = document.getElementById("description"+document.getElementById("inventorySelectedId").value).textContent;
	document.getElementById("newItemQuantity").value = document.getElementById("quantity"+document.getElementById("inventorySelectedId").value).textContent;
	
	document.InventoryForm.submit();
}
	
function selectItem(id)
{
	if(document.getElementById("inventoryAction").value=="")
	{
		if(document.getElementById("inventorySelectedId").value=="")
		{
			document.getElementById("inventorySelectedId").value=id;
					
			document.getElementById(document.getElementById("inventorySelectedId").value).style.backgroundColor ="yellow";
							
			document.getElementById("createItemBtn").disabled=true;
			document.getElementById("saveItemBtn").disabled=true;
			document.getElementById("editItemBtn").disabled=false;
			document.getElementById("deleteItemBtn").disabled=false;
			document.getElementById("plusItemBtn").disabled=false;
			document.getElementById("minusItemBtn").disabled=false;
					
		}
		else
		{
			document.getElementById(document.getElementById("inventorySelectedId").value).style.backgroundColor ="gray";
				
			document.getElementById("inventorySelectedId").value = "";
				
			document.getElementById("createItemBtn").disabled=false;
			document.getElementById("saveItemBtn").disabled=true;
			document.getElementById("editItemBtn").disabled=true;
			document.getElementById("deleteItemBtn").disabled=true;
			document.getElementById("plusItemBtn").disabled=true;
			document.getElementById("minusItemBtn").disabled=true;
			
			
		}
		
	}
}

function deleteItem()
{
	document.getElementById("inventoryAction").value="delete";
	document.InventoryForm.submit();
}




</script>
<!------------------------------------------------------------------------>

<form name="InventoryForm" action="#" method="post">

	<table class="content">
	
	<tr>
		<td>Inventory</td>
		
		<td> 
			<input type="button" id="deleteItemBtn" value="Delete Item" class="right" onclick="deleteItem()" disabled>
			<input type="button" id="editItemBtn" value="Edit Item" onclick="editItem()" class="right" disabled>
			<input type="submit" id="saveItemBtn" value="Save Item" class="right" onclick="return saveItem()" disabled>
			<input type="button" id="createItemBtn" value="Create Item" class="right" onclick="createItem()">
			<input type="hidden" id="inventoryAction" name="inventoryAction" value="">
			<input type="hidden" id="inventorySelectedId" name="inventorySelectedId" value="">		
		</td>
	</tr>
	
		<tr><td colspan="2">
			<div class="round2">
			<table id="inventory_table">
				<tr><th class="inventory_table_id_col">ID</th><th class="inventory_table_item_col">Item<span class="red">*</span></th><th class="inventory_table_desc_col">Description<span class="red">*</span></th><th class="inventory_table_qty_col">Quantity<span class="red">*</span></th></tr>
			</table>
			</div>
			
			
			<div style="visibility:hidden" id="newItemRow">
				<table id="inventory_table">
					<tr><td class="inventory_table_id_col"></td><td class="inventory_table_item_col"><input type="text" name="newItemName" id="newItemName"></td><td class="inventory_table_desc_col"><input type="text" name="newItemDescription" id="newItemDescription"></td><td class="inventory_table_qty_col"><input type="text" name="newItemQuantity" id="newItemQuantity"></td></tr>	
				</table>
			</div>
			
			<div style="overflow:hidden; overflow-y:auto; height:350px;">
				<table id="inventory_table" >				
					<?php 
					
						 foreach($allInventoryItems as $item)
						{
							echo "<tr id='".$item->getInventoryId()."' onclick='selectItem(".$item->getInventoryId().")'>
							<td id='id".$item->getInventoryId()."' class='inventory_table_id_col'>".$item->getInventoryId()."</td>
							<td id='name".$item->getInventoryId()."' class='inventory_table_item_col'>".$item->getProductName()."</td>
							<td id='description".$item->getInventoryId()."'class='inventory_table_desc_col'>".$item->getProductDescription()."</td>
							<td id='quantity".$item->getInventoryId()."' class='inventory_table_qty_col'>".$item->getProductQuantity()."</td>
							</tr>";
							
						}
						
                         
					?>		
				</table>
			</div>
			
			<table width="100%">
				
					<tr>
					<td width="150px"></td>
					<td><br>
					<input type="button" id="plusItemBtn" value="+" style="float:left; height:100px; width:100px;  border-radius: 50%; font-size:100px; text-align:center; line-height:50px; padding-bottom:60px;" onclick="plusItem()" disabled>
					</td>
					
					<td><br>
					<input type="button" id="minusItemBtn" value="-" style="float:right; height:100px; width:100px;  border-radius: 50%; font-size:100px; text-align:center; line-height:50px; padding-bottom:60px;" onclick="minusItem()" disabled>
					</td>
					
					<td width="275px"></td>
					</tr>
			</table>
		
		</td></tr>

	
	</table>
	
</form>
						
<!------------------------------------------------------------------------>
			
			</td>
		</tr>